<template>
  <scroll-view scroll-y @scrolltolower="handleLower" class="album_swiper">
    <!-- 
      1 自动轮播 autoplay
      2 指示器 indicator-dots 
      3 衔接轮播 circular

      4 swiper 
        默认的高度 150px
      5 image 
        默认的宽度 320px => 基本样式中 重置了 100%
        默认的高度 240px 
      6 计算图片的宽度和高度的比例
      7 把图片的比例也写到swiper标签样式 
      8 swiper-item 
        100% 
     -->
    <!-- 轮播图开始 -->
    <swiper autoplay circular indicator-dots>
      <swiper-item v-for="item in swiperList" :key="item.id">
        <image mode="widthFix" :src="item.thumb"></image>
      </swiper-item>
    </swiper>
    <!-- 轮播图结束 -->

    <!-- 列表开始 -->
    <view class="album_list">
      <view class="album_item" v-for="item in album" :key="item.id">
        <navigator :url="`/pages/album/index?id=${item.id}`" class="img">
          <image mode="aspectFill" :src="item.cover"></image>
        </navigator>
        <view class="album_detail">
          <view class="album_name">{{ item.name }} </view>
          <view class="album_desc"> {{ item.desc }} </view>
          <view class="album_attention" >
            <text @click="attent(item)" :data-attented="item.attented">
              {{ item.attented ? "取消关注" : "+ 关注" }}</text
            >
          </view>
        </view>
      </view>
    </view>
    <!-- 列表结束 -->
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      params: {
        //显示的条数
        limit: 30,
        //关键字
        order: "new",
        //跳过数据
        skip: 0,
      },
      //轮播图数组
      swiperList: [],
      //列表数据
      album: [],
      //有没有更多数据
      hasMore: true,
      //触底控制
      toLower: false,
    };
  },
  mounted() {
    // 修改页面的标题
    uni.setNavigationBarTitle({ title: "专辑" });
    this.getList();
  },
  methods: {
    //获取专辑页面的数据
    getList() {
      this.request({
        url: "http://157.122.54.189:9088/image/v1/wallpaper/album",
        data: this.params,
      }).then((res) => {
        if (res.res.album.length === 0) {
          //没有下一页数据
          this.hasMore = false;
          uni.showToast({
            title: "没有更多数据了!",
            icon: "none",
          });
          return;
        }
        if (this.swiperList.length == 0) {
          //第一次发送请求
          this.swiperList = res.res.banner;
          this.album = res.res.album;
        }
        //触底了就把原先的数据和新的数据拼接起来
        if (this.toLower) {
          this.album = [...this.album, ...res.res.album];
        }
        //获取缓存中的数据
        const attents = wx.getStorageSync("attents") || [];
        //遍历列表数据
        this.album.forEach((i) => {
          //如果缓存中有列表中的数据
          let index = attents.findIndex((v) => v.id === i.id);
          if (index != -1) {
            //把该条数据的关注设置为true
            i.attented = true;
          } else {
            //其他设置为false
            i.attented = false;
          }
        });
        console.log(this.album);
      });
    },
    //触底事件
    handleLower() {
      //把数据拼接的口打开
      this.toLower = true;
      //判断是否还有下一页数据
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        //重新获取数据
        this.getList();
      } else {
        uni.showToast({
          title: "没有跟多数据了！",
          icon: "none",
        });
      }
    },
    //关注
    attent(i) {
      //获取缓存中的关注数据
      const attents = wx.getStorageSync("attents") || [];
      //深拷贝data中的数据
      let newAlbum = JSON.parse(JSON.stringify(this.album));
      //判断关注状态
      if (i.attented) {
        //点击的关注状态是true，证明是取关操作
        newAlbum.forEach((v) => {
          //根据当前要修改的id修改对应的状态
          if (v.id === i.id) {
            //把关注状态取反
            v.attented = !v.attented;
            //找出缓存中关注数据的该条数据并删除
            const index = attents.findIndex((item) => item.id == i.id);
            if (index != -1) {
              wx.showToast({
                title: "取消关注",
                icon: "success",
                duration: 1000,
                mask: true,
              });
              attents.splice(index, 1);
            }
          }
        });
      } else {
        //一开始attented都是false，点击的时候就是关注操作
        newAlbum.forEach((v) => {
          //根据当前要修改的id修改对应的状态
          if (v.id === i.id) {
            //把关注状态取反
            v.attented = !v.attented;
            wx.showToast({
              title: "关注成功",
              icon: "success",
              duration: 1000,
              mask: true,
            });
            //把该条数据存入缓存数据中
            attents.push(v);
          }
        });
      }
      //不管是啥操作，最后都需要把修改的数据赋值到data中
      this.album = newAlbum;
      //把修改的数据存回缓存
      wx.setStorageSync("attents", attents);
    },
  },
};
</script>

<style lang="scss" scoped>
.album_swiper {
  // height：屏幕的高度 -  头部标题的高度
  height: calc(100vh - 36px);
  swiper {
    height: 326.1rpx;
    image {
      height: 100%;
    }
  }
}
.album_list {
  .album_item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16rpx;
    border-bottom: 1px solid #ccc;
    .img {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      image {
        width: 250rpx;
        height: 200rpx;
        padding: 10rpx;
      }
    }

    .album_detail {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      // align-items: center;
      .album_name {
        font-size: 32rpx;
        font-weight: 600;
        padding-left: 30rpx;
      }
      .album_desc {
        padding: 12rpx 12rpx 0 20rpx;
        color: #666;
        font-size: 26rpx;
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }

      .album_attention {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: 40rpx;
        text {
          margin: 0 20rpx 10rpx 20rpx;
          border: 1px solid #fa8072;
          padding: 10rpx;
          font-size: 26rpx;
          color: #fa8072;
          font-weight: 600;
          text-align: center;
        }
      }
    }
  }
}
</style>
